<template>
  <div class="report">
    <div class="header flex-row flex-align-items-c">
      <p class="header-title">数据分析</p>
      <div class="date-picker-box">
        <el-date-picker
          v-model="dataPickerVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <el-button class="search-btn" @click="seachData">搜索</el-button>
      </div>
    </div>
    <div class="line-box">
      <div class="line-header">流量分析</div>
      <div class="charts-content flex-row flex-align-items-c">
        <ve-line :data="chartData" width="95%"></ve-line>
        <div class="line-right">
          <div class="flex-row flex-align-items-c right-item">
            <img src="../../assets/images/user-icon.png" alt />
            <div>
              <p>{{ave_viewers}}</p>
              <span>平均日观看</span>
            </div>
          </div>
          <div class="flex-row flex-align-items-c right-item">
            <img src="../../assets/images/users-icon.png" alt />
            <div>
              <p>{{ave_visitors}}</p>
              <span>平均日流量</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="histogram-chart">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="年龄分布" name="first">
          <div>
            <ve-histogram :data="lineChartData" :settings="chartSettings"></ve-histogram>
            <!-- <ve-bar :data="histogramChartData" :settings="chartSettings" :extend="extend"></ve-bar> -->
            <ve-pie :data="pieChartData"></ve-pie>
          </div>
        </el-tab-pane>
        <el-tab-pane label="性别分布" name="second" lazy>
          <div>
            <!-- <ve-bar
              :data="histogramChartData2"
              :settings="chartSettingsTwo"
              :extend="extend"
              id="bar2"
            ></ve-bar>-->
            <ve-histogram :data="lineChartData2" :settings="chartSettings"></ve-histogram>
            <ve-pie :data="pieChartData2" :settings="pieChartSettingsTwo"></ve-pie>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    this.extend = {
      series: {
        itemStyle: {
          barBorderRadius: 10
        }
      }
    }
    this.chartSettings = {
      seriesMap: [
        {
          color: ['red', 'green', 'yellow']
        }
      ],
      //   yAxisType: ["percent"],
      // dataType: {
      //   Seventeen: "percent",
      //   twentyfive: "percent",
      //   Thirtyfive: "percent",
      //   fortyfive: "percent",
      //   sixty: "percent",
      //   other: "percent"
      // },

      labelMap: {
        Seventeen: '0~17',
        twentyfive: '18~25',
        Thirtyfive: '25~35',
        fortyfive: '36~45',
        sixty: '46~60',
        other: '60以上'
      },
      stack: {
        xxx: [
          'Seventeen',
          'twentyfive',
          'Thirtyfive',
          'fortyfive',
          'sixty',
          'other'
        ]
      }
    }
    this.pieChartSettingsTwo = {
      labelMap: {
        Seventeen: '0~17',
        twentyfive: '18~25',
        Thirtyfive: '25~35',
        fortyfive: '36~45',
        sixty: '46~60',
        other: '60以上'
      },
      stack: {
        xxx: [
          'Seventeen',
          'twentyfive',
          'Thirtyfive',
          'fortyfive',
          'sixty',
          'other'
        ]
      }
    }
    this.chartSettingsTwo = {
      xAxisType: ['percent'],
      stack: {
        xxx: ['男', '女', '未知']
      }
    }
    this.pieChartSetting = {
      dimension: 'row',
      metrics: 'row',
      yAxisType: ['percent']
    }
    return {
      dataPickerVal: '',
      pickerOptions: {
        disabledDate: time => {
          if (this.dataPickerVal != '') {
            return (
              time.getTime() > Date.now() - 24 * 60 * 60 * 1000 ||
              time.getTime() > this.dataPickerVal
            )
          } else {
            return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
          }
        }
      },
      chartData: {
        columns: ['日期', '观看人数', '总人流量'],
        rows: [
          { 日期: '0:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '2:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '4:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '6:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '8:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '10:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '12:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '14:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '16:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '18:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '20:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '22:00', 观看人数: 0, 总人流量: 0 },
          { 日期: '24:00', 观看人数: 0, 总人流量: 0 }
        ]
      },
      lineChartData: {
        columns: ['年龄', '访问次数'],
        rows: [
          { 年龄: '0-17', 访问次数: 0 },
          { 年龄: '18-25', 访问次数: 0 },
          { 年龄: '26-35', 访问次数: 0 },
          { 年龄: '36-45', 访问次数: 0 },
          { 年龄: '46-60', 访问次数: 0 },
          { 年龄: '60以上', 访问次数: 0 }
        ]
      },
      lineChartData2: {
        columns: ['性别', '访问次数'],
        rows: [
          { 性别: '男', 访问次数: 0 },
          { 性别: '女', 访问次数: 0 }
          //   { 性别: "未知", 访问次数: 2923 }
        ]
      },
      ave_viewers: 0,
      ave_visitors: 0,
      // histogramChartData: {
      //   columns: [
      //     "日期",
      //     "Seventeen",
      //     "twentyfive",
      //     "Thirtyfive",
      //     "fortyfive",
      //     "sixty",
      //     "other"
      //   ],
      //   rows: [
      //     {
      //       日期: "周一",
      //       Seventeen: 0.1,
      //       twentyfive: 0.3,
      //       Thirtyfive: 0.2,
      //       fortyfive: 0.1,
      //       sixty: 0.15,
      //       other: 0.15
      //     },
      //     {
      //       日期: "周二",
      //       Seventeen: 0.1,
      //       twentyfive: 0.3,
      //       Thirtyfive: 0.1,
      //       fortyfive: 0.2,
      //       sixty: 0.15,
      //       other: 0.15
      //     },
      //     {
      //       日期: "周三",
      //       Seventeen: 0.15,
      //       twentyfive: 0.3,
      //       Thirtyfive: 0.15,
      //       fortyfive: 0.1,
      //       sixty: 0.1,
      //       other: 0.2
      //     },
      //     {
      //       日期: "周四",
      //       Seventeen: 0.1,
      //       twentyfive: 0.1,
      //       Thirtyfive: 0.15,
      //       fortyfive: 0.3,
      //       sixty: 0.15,
      //       other: 0.2
      //     },
      //     {
      //       日期: "周五",
      //       Seventeen: 0.1,
      //       twentyfive: 0.3,
      //       Thirtyfive: 0.2,
      //       fortyfive: 0.1,
      //       sixty: 0.15,
      //       other: 0.15
      //     },
      //     {
      //       日期: "周六",
      //       Seventeen: 0.1,
      //       twentyfive: 0.3,
      //       Thirtyfive: 0.2,
      //       fortyfive: 0.1,
      //       sixty: 0.15,
      //       other: 0.15
      //     },
      //     {
      //       日期: "周日",
      //       Seventeen: 0.1,
      //       twentyfive: 0.3,
      //       Thirtyfive: 0.2,
      //       fortyfive: 0.1,
      //       sixty: 0.15,
      //       other: 0.15
      //     }
      //   ]
      // },
      // histogramChartData2: {
      //   columns: ["日期", "男", "女", "未知"],
      //   rows: [
      //     {
      //       日期: "周一",
      //       男: 0.15,
      //       女: 0.15,
      //       未知: 0.7
      //     },
      //     {
      //       日期: "周二",
      //       男: 0.3,
      //       女: 0.5,
      //       未知: 0.2
      //     },
      //     {
      //       日期: "周三",
      //       男: 0.6,
      //       女: 0.1,
      //       未知: 0.3
      //     },
      //     {
      //       日期: "周四",
      //       男: 0.6,
      //       女: 0.1,
      //       未知: 0.3
      //     },
      //     {
      //       日期: "周五",
      //       男: 0.6,
      //       女: 0.1,
      //       未知: 0.3
      //     },
      //     {
      //       日期: "周六",
      //       男: 0.6,
      //       女: 0.1,
      //       未知: 0.3
      //     },
      //     {
      //       日期: "周日",
      //       男: 0.6,
      //       女: 0.1,
      //       未知: 0.3
      //     }
      //   ]
      // },
      pieChartData: {
        columns: ['年龄', '访问次数'],
        rows: [
          { 年龄: '0-17', 访问次数: 0 },
          { 年龄: '18-25', 访问次数: 0 },
          { 年龄: '26-35', 访问次数: 0 },
          { 年龄: '36-45', 访问次数: 0 },
          { 年龄: '46-60', 访问次数: 0 },
          { 年龄: '60以上', 访问次数: 0 }
        ]
      },
      pieChartData2: {
        columns: ['性别', '访问次数'],
        rows: [
          { 性别: '男', 访问次数: 0 },
          { 性别: '女', 访问次数: 0 }
          //   { 性别: "未知", 访问次数: 2923 }
        ]
      },
      activeName: 'first'
    }
  },
  computed: {},
  created () {
    this.getDateDiagram()
    this.getDateHistogram()
  },
  mounted () {},
  watch: {},
  methods: {
    seachData () {
      this.getDateHistogram()
      this.getDateDiagram()
    },
    handleClick (tab, event) {
      //   console.log(tab, event);
      //   console.log(tab.name);
      this.activeName = tab.name
    },
    // 流量分析折线图
    getDateDiagram () {
      let dataPickerValue = this.dataPickerVal
      let year = this.dataPickerVal
        ? new Date(dataPickerValue[0]).getFullYear()
        : new Date().getFullYear()
      let month = this.dataPickerVal
        ? new Date(dataPickerValue[0]).getMonth() + 1 > 9
          ? new Date(dataPickerValue[0]).getMonth() + 1
          : '0' + (new Date(dataPickerValue[0]).getMonth() + 1)
        : new Date().getMonth() + 1 > 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1)
      let day = this.dataPickerVal
        ? new Date(dataPickerValue[0]).getDate() > 9
          ? new Date(dataPickerValue[0]).getDate()
          : '0' + new Date(dataPickerValue[0]).getDate()
        : new Date().getDate() - 1 > 9
          ? new Date().getDate() - 1
          : '0' + (new Date().getDate() - 1)
      let endYear = this.dataPickerVal
        ? new Date(dataPickerValue[1]).getFullYear()
        : new Date().getFullYear()
      let endMonth = this.dataPickerVal
        ? new Date(dataPickerValue[1]).getMonth() + 1 > 9
          ? new Date(dataPickerValue[1]).getMonth() + 1
          : '0' + (new Date(dataPickerValue[1]).getMonth() + 1)
        : new Date().getMonth() + 1 > 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1)
      let endDay = this.dataPickerVal
        ? new Date(dataPickerValue[1]).getDate() > 9
          ? new Date(dataPickerValue[1]).getDate()
          : '0' + new Date(dataPickerValue[1]).getDate()
        : new Date().getDate() - 1 > 9
          ? new Date().getDate() - 1
          : '0' + (new Date().getDate() - 1)

      let start = `${year}-${month}-${day} 00:00:00`
      let end = `${endYear}-${endMonth}-${endDay} 23:59:59`
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&start=${start}&end=${end}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .getDateDiagram({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            res.data.result.viewers.forEach((element, index) => {
              if (index % 2 == 0 && index > 0) {
                // console.log('index % 2-index',index);
                // console.log('index % 2',res.data.result.data.viewers[index+1]);
                this.chartData.rows[index / 2]['观看人数'] =
                  res.data.result.viewers[index - 1] +
                  res.data.result.viewers[index]
                this.chartData.rows[index / 2]['总人流量'] =
                  res.data.result.visitors[index - 1] +
                  res.data.result.visitors[index]
              } else if (
                index == 0 ||
                index == res.data.result.viewers.length - 1
              ) {
                // console.log(element);
                this.chartData.rows[index]['观看人数'] = element
                this.chartData.rows[index]['总人流量'] =
                  res.data.result.visitors[index]
              }
            })
            this.ave_viewers = res.data.result.ave_viewers
            this.ave_visitors = res.data.result.ave_visitors
          } else {
            this.chartData.rows = [
              { 日期: '0:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '2:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '4:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '6:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '8:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '10:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '12:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '14:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '16:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '18:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '20:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '22:00', 观看人数: 0, 总人流量: 0 },
              { 日期: '24:00', 观看人数: 0, 总人流量: 0 }
            ]
          }
        })
        .catch(err => {})
    },
    getDateHistogram () {
      let dataPickerValue = this.dataPickerVal
      let year = this.dataPickerVal
        ? new Date(dataPickerValue[0]).getFullYear()
        : new Date().getFullYear()
      let month = this.dataPickerVal
        ? new Date(dataPickerValue[0]).getMonth() + 1 > 9
          ? new Date(dataPickerValue[0]).getMonth() + 1
          : '0' + (new Date(dataPickerValue[0]).getMonth() + 1)
        : new Date().getMonth() + 1 > 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1)
      let day = this.dataPickerVal
        ? new Date(dataPickerValue[0]).getDate() > 9
          ? new Date(dataPickerValue[0]).getDate()
          : '0' + new Date(dataPickerValue[0]).getDate()
        : new Date().getDate() - 1 > 9
          ? new Date().getDate() - 1
          : '0' + (new Date().getDate() - 1)
      let endYear = this.dataPickerVal
        ? new Date(dataPickerValue[1]).getFullYear()
        : new Date().getFullYear()
      let endMonth = this.dataPickerVal
        ? new Date(dataPickerValue[1]).getMonth() + 1 > 9
          ? new Date(dataPickerValue[1]).getMonth() + 1
          : '0' + (new Date(dataPickerValue[1]).getMonth() + 1)
        : new Date().getMonth() + 1 > 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1)
      let endDay = this.dataPickerVal
        ? new Date(dataPickerValue[1]).getDate() > 9
          ? new Date(dataPickerValue[1]).getDate()
          : '0' + new Date(dataPickerValue[1]).getDate()
        : new Date().getDate() - 1 > 9
          ? new Date().getDate() - 1
          : '0' + (new Date().getDate() - 1)

      let start = `${year}-${month}-${day} 00:00:00`
      let end = `${endYear}-${endMonth}-${endDay} 23:59:59`
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&start=${start}&end=${end}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .getDateHistogram({
          secret: RASCODE
        })
        .then(res => {
          console.log(res.data.result.age)
          if (res.data.errno == '000') {
            for (const key in res.data.result.age) {
              // console.log(key)
              for (const key2 in this.lineChartData.rows) {
                //  console.log(this.lineChartData.rows[key2])
                if (key == this.lineChartData.rows[key2]['年龄']) {
                  console.log(key)
                  this.lineChartData.rows[key2]['访问次数'] =
                    res.data.result.age[key]
                  this.pieChartData.rows[key2]['访问次数'] =
                    res.data.result.age[key]
                }
              }
              // this.lineChartData.rows[key]
              //   if (object.hasOwnProperty(key)) {
              //     const element = object[key];
              //   }
            }
            for (const key in res.data.result.male) {
              // console.log(key)
              for (const key2 in this.lineChartData2.rows) {
                //  console.log(this.lineChartData.rows[key2])
                if (key == this.lineChartData2.rows[key2]['性别']) {
                  console.log(key)
                  this.lineChartData2.rows[key2]['访问次数'] =
                    res.data.result.male[key]
                  this.pieChartData2.rows[key2]['访问次数'] =
                    res.data.result.male[key]
                }
              }
            }
            // res.data.result.age.map((element,index) => {
            //     console.log(element)
            //     // this.lineChartData.rows.forEach(lineChartDataElement => {
            //     //     console.log(lineChartDataElement)
            //     // });
            // });
            // this.lineChartData.rows =
          } else {
          }
        })
        .catch(err => {})
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
<style>
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #ef7e09;
}
</style>
